<template>
  <div class="page region-list">
    <div class="scroll-view">
      <customHeader middleTitle="区域管理" rightTitle="添加" @rightCallBack="add" />
      <div class="page-body">
        <ul
          class="region-ul"
          v-infinite-scroll="loadMore"
          infinite-scroll-disabled="loading"
          infinite-scroll-distance="30"
          v-show="list.length>0"
        >
          <li @click="eidt(item.regionId)" v-for="(item,index) in list" :key="index">
            <div class="left">
              <div class="region">{{item.regionName}}</div>
              <div class="store">{{item.shopList&&item.shopList.length}}家门店</div>
            </div>
            <div class="right">
              <i class="zhk-list_rarrow"></i>
            </div>
          </li>
        </ul>
        <p v-show="loading" class="page-infinite-loading">
          <mt-spinner :style="{display:'inline-block'}" type="fading-circle"></mt-spinner>
        </p>
        <div v-show="noMore&&!loading&&list.length!==0" class="no-more">
          <span>已经全部加载完毕</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import customHeader from '../../components/header/header';
import { Toast } from 'mint-ui';
export default {
  name: 'regionList',
  data() {
    return {
      loading: false,
      noMore: false,
      pageIndex: 1,
      pageSize: 10,
      totalCount: 0,
      list: []
    };
  },
  methods: {
    add() {
      this.$router.push({ path: '/regionManage/regionEdit' });
    },
    eidt(regionId) {
      this.$router.push({ path: '/regionManage/regionEdit', query: { regionId:regionId } });
    },
    loadData() {
      this.loading = true;
      if (this.pageIndex == 1) {
        this.list = [];
      }
      const param={currentPage:this.pageIndex,pageSize:this.pageSize};
      this.ajax({
        //url: `/app/region/queryRegionList.do?&currentPage=${this.pageIndex}&pageSize=${this.pageSize}`,
        url: `/newapp/region/queryRegionList.do`,
        type: "post",
        data:param,
        controlLoading: false,
      })
        .then(response => {
          this.loading = false;
          if (response.success) {
            let data = response.resultObject;
            if (data.dataList) {
              this.list = this.list.concat(data.dataList);
            }
            if (data.dataAllCount) {
              this.noMore = Math.ceil(data.dataAllCount / this.pageSize) === this.pageIndex ? true : false;
            } else {
              this.noMore = true;
            }

            this.pageIndex = this.pageIndex + 1;
          } else {
            this.noMore = true;
            Toast(response.msg);
          }
        })
        .catch(error => {
          this.loading = false;
          this.noMore = true;
        });
    },

    //无限加载
    loadMore() {
      if (this.loading || this.noMore) {
        return;
      }
      this.loadData();
    },
  },
  components: {
    customHeader,
  },
  created() {

  }
};
</script>
<style lang='scss' scoped>
@import "regionManage";
</style>
